<template>
  <div class="checkResultNoClass">
    <el-row style="font-size: 18px;">
      <el-col :span="24">
        记录对象：
        <p class="textBackground">{{detailInfo.obj_no}}</p>
      </el-col>

      <el-col :span="24"
              v-for="(item,idx) in detailInfo.content_detail"
              :key="idx">
        <div style="vertical-align: top;">{{item.content_name}}：</div>

        <!--            文本-->
        <p v-if="item.control_type==1||item.control_type==2"
           class="textBackground">{{item.real_value[0].value||''}}</p>

        <!--            合格不合格-->
        <div v-if="item.control_type==6"
             class="textBackground">
          <p v-if="item.real_value[0].value==='0'">不合格</p>
          <p v-if="item.real_value[0].value==='1'">合格</p>
        </div>
        <!--            图片-->
        <div v-if="item.control_type==7">

          <el-image v-if="k"
                    v-for="(k,idx) in item.real_value"
                    :key="idx"
                    fit="cover"
                    style="width: 120px;height: 120px;margin-right: 10px;"
                    :preview-src-list="item.real_value"
                    :src="k">
          </el-image>

          <span v-else>暂无图片</span>
        </div>

        <!--            单选下拉框-->
        <div v-if="item.control_type==3"
             class="textBackground">
          <p v-if="item.real_value[0]!==''">{{item.real_value[0]}}</p>
          <p v-else>暂无选项</p>
          <!--                <el-select v-model="item.real_value[0]"-->
          <!--                           size="mini" disabled>-->
          <!--                  <el-option v-for="k in item.origin_data"-->
          <!--                             :label="k.key"-->
          <!--                             :value="k.val"-->
          <!--                             :key="k.val"></el-option>-->
          <!--                </el-select>-->
        </div>
        <!--            多选下拉框-->
        <div v-if="item.control_type==15"
             class="textBackground">
          <p v-if="item.real_value[0]!==''">{{item.real_value[0]}}</p>
          <p v-else>暂无选项</p>
          <!--                <el-select v-model="item.real_value[0].split(',')"-->
          <!--                           multiple-->
          <!--                           disabled-->
          <!--                           size="mini" >-->
          <!--                  <el-option v-for="k in item.origin_data"-->
          <!--                             :label="k.key"-->
          <!--                             :value="k.val"-->
          <!--                             :key="k.val"></el-option>-->
          <!--                </el-select>-->
        </div>

        <div v-if="item.control_type==12"
             class="textBackground">
          <el-row>
            <el-col :span="6">姓名:</el-col>
            <el-col :span="18">
              <p>{{item.real_value[0].name}}</p>
            </el-col>
            <el-col :span="6">公司:</el-col>
            <el-col :span="18">
              <p>{{item.real_value[0].company}}</p>
            </el-col>

            <el-col :span="6">手机号:</el-col>
            <el-col :span="18">
              <p>{{item.real_value[0].phone}}</p>
            </el-col>
          </el-row>

        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  components: {},
  data () {
    return {
      detailInfo: {},
      pageId: '',
    }
  },
  computed: {},
  watch: {},
  methods: {
    _getDetail () {

      CommonCheckApi.getCheckResultNoDetailAPI({
        params: {
          id: this.pageId || ''
        }
      }).then(res => {

        document.title = '检查项详情'
        this.detailInfo = res.data

        this.detailInfo.content_detail.forEach(item => {


          if (item.control_type == 3 || item.control_type == 15) {
            item.real_value = item.real_value || ['']
          } else {
            item.real_value = item.real_value || [{ value: '' }]
          }
        })


      })

    },
  },
  mounted () {
    this.pageId = this.$route.query.id
    this._getDetail()
  },
}
</script>

<style scoped lang="scss">
.textBackground {
  padding: 10px;
  background: #f7f7f7;
}
.checkResultNoClass {
  padding: 20px;
  .el-image {
    /deep/ .el-icon-circle-close {
      font-size: 50px;
      color: white;
    }
  }
}
</style>
